<template>
	<view class="form-input-layout" :style="{padding:`0 ${padding}`,backgroundColor:bgColor,height}" @tap="didSelect">
		<slot name="left">
			<text class="form-text-xh" v-if="props.required">*</text>
			<text class="form-text" :style="{'min-width':minWidth,'max-width':maxWidth}" v-if="showTitle">{{title}}</text>
		</slot>
		<view class="form-input-box">
			<input class="form-input" :class="{'no-edit':isSelect}" :style="{'font-weight':fontWeight,'font-size':fontSize,'color':color,textAlign:inputTextAlign}" :type="keyboardType" v-model="inputValue" :placeholder="placeholder" placeholder-style="color:#c0c4cc;" :maxlength="maxCount" :password="isHidePassword" @blur="onBlur" @focus="focus" />
			<view class="input-right-box" v-if="(isEye || isClear) && inputValue && !isSelect">
				<image class="input-right-clear" src="/static/login/input_clear_icon.png" mode="aspectFit" v-if="isClear && inputValue && isFocus" @tap.stop="clearInput"></image>
				<image class="input-right-eye" :src="isHidePassword ? '/static/login/eye_hide_icon.png' : '/static/login/eye_show_icon.png'" mode="aspectFit" v-if="isEye && inputValue" @tap.stop="changeEyeStatus"></image>
			</view>
		</view>
		<slot name="right">
			<image v-if="showRightIcon && isSelect" class="form-input-right-icon" src="/static/login/right_gray_icon.png" mode="aspectFit"></image>
		</slot>
		<view class="line" v-if="isLine"></view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	/** 组件回调方法
	 * onBlur：输入框编辑结束
	 * didSelect：点击组件
	 */
	const emits = defineEmits(['didSelect', 'onBlur'])
	// 双向绑定输入框内容
	const inputValue = defineModel({default:''})
	const props = defineProps({
		//标题
		title: {
			type: String,
			default: '标题'
		},
		//是否展示标题，默认显示
		showTitle: {
			type: Boolean,
			default: false
		},
		//提示输入信息
		placeholder: {
			type: String,
			default: '请输入'
		},
		//是否显示右侧箭头,
		showRightIcon: {
			type: Boolean,
			default: true
		},
		//是否是选择组件，默认输入组件
		isSelect: {
			type: Boolean,
			default: false
		},
		/**
		 * 输入键盘类型：默认text
		 * text：文本输入键盘 number：数字键盘 idcard：身份证键盘 digit：带小数点的数字键盘 tel：电话输入键盘
		 */
		keyboardType: {
			type: String,
			default: 'text'
		},
		//最大输入长度，默认不限
		maxCount: {
			type: Number,
			default: -1
		},
		//是否是密码输入框，默认否
		password: {
			type: Boolean,
			default: false
		},
		//标题最小宽度
		minWidth: {
			type: String,
			default: '120rpx'
		},
		//标题最大宽度
		maxWidth: {
			type: String,
			default: '750rpx'
		},
		//是否需要有清空内容功能
		isClear: {
			type: Boolean,
			default: true
		},
		//是否需显示和隐藏密码切换功能
		isEye: {
			type: Boolean,
			default: false
		},
		// 字体大小
		fontSize: {
			type: String,
			default: '28rpx'
		},
		//字重
		fontWeight: {
			type: Number,
			default: 0
		},
		//文本框字体颜色
		color: {
			type: String,
			default: '#333333'
		},
		//是否有分割线
		isLine: {
			type: Boolean,
			default: true
		},
		//左右间距
		padding: {
			type: String,
			default: '30rpx'
		},
		// 输入框内容对齐方式，默认居左
		inputTextAlign:{
			type: String,
			default: 'left'
		},
		// 背景色
		bgColor:{
			type: String,
			default: '#ffffff'
		},
		height:{
			type: String,
			default: '100rpx'
		},
		// 是否是必填项
		required:{
			type: Boolean,
			default: false
		}
		
	})
	//是否隐藏密码
	const isHidePassword = ref(props.password)
	//是否获取焦点
	const isFocus = ref(false)
	//获取焦点
	const focus = () => {
		isFocus.value = true
	}
	//失去焦点
	const onBlur = () => {
		setTimeout(() => {
			isFocus.value = false
			emits('onBlur')
		}, 150)
	}
	//点击选择
	const didSelect = () => {
		if (props.isSelect) {
			emits('didSelect')
		}
	}
	// 密码显示状态切换
	const changeEyeStatus = () => {
		isHidePassword.value = !isHidePassword.value
	}
	//清空输入框内容
	const clearInput = () => {
		inputValue.value = ''
	}
</script>,                                              m

<style lang="scss" scoped>
	.form-input-layout {
		position: relative;
		display: flex;
		align-items: center;
		font-size: 28rpx;
		height: 100rpx;
		flex: 1;
		.line {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			height: 1px;
			transform: scaleY(0.5);
			background-color: $xh-line-color;
		}

		.form-text {
			flex-shrink: 0;
			margin-right: 40rpx;
		}
		.form-text-xh{
			flex-shrink: 0;
			color: $xh-red-color;
			font-size: 24rpx;
		}
		.form-input-box {
			display: flex;
			align-items: center;
			flex: 1;
			.form-input {
				font-size: 28rpx;
				flex: 1;
				text-align: left;
			}

			.no-edit {
				pointer-events: none;
			}

			.input-right-box {
				flex-shrink: 0;
				display: flex;
				align-items: center;
				margin-left: 20rpx;
				.input-right-clear {
					width: 32rpx;
					height: 32rpx;
				}
				.input-right-eye {
					width: 32rpx;
					height: 32rpx;
					margin-left: 20rpx;
				}
			}

		}

		.form-input-right-icon {
			flex-shrink: 0;
			width: 24rpx;
			height: 24rpx;
			margin-left: 10rpx;
		}
	}
</style>